<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="node后台" name="node">
        <el-button type="primary" @click="downloadFileFlow" plain>二进制流下载</el-button>
        <el-button type="primary" @click="downloadBase64" plain>base64下载</el-button>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  ref
} from 'vue'
import FileModel from '@/api/file.js';
import { dataToFile, dataFlowToFile } from '@/utils/common/common.js';

export default {
  name: 'fileDownLoad',
  setup() {
    const activeName = ref('node');
    const imgPic = ref('');

    const handleClick = () => {
      if(activeName.value == 'node') {
        activeName.value = 'java'
      } else {
        activeName.value = 'node'
      }
    }

    const downloadFileFlow = () => { // 处理二进制流，下载文件
      FileModel.getPdfZipFlow().then(res => {
        const params = {
          type: 'application/zip',
          data: res,
          fileName: "测试.zip"
        }
        dataFlowToFile(params)
      }).catch(err => {
        console.log(err);
      })
    }

    const downloadBase64 = () => {
      FileModel.getFileBase64().then(res => {
        const params = {
          type: 'application/zip',
          data: res,
          fileName: "测试.zip"
        }
        dataToFile(params)
      })
    }

    const picBase64 = () => { // 获取图片base64
      FileModel.getPicBase64().then(res => {
        imgPic.value = res
      })
    }

    picBase64();

    return {
      activeName,
      imgPic,
      downloadFileFlow,
      downloadBase64,
      handleClick
    }
  }
}
</script>